<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/css-dc/initializ.css">
    <link rel="stylesheet" href="../../css/css-dc/sprites.css">
    <link rel="stylesheet" href="../../css/css-dc/dc_list2.css">
    <link rel="stylesheet" href="../../css/css-dc/sprites.css">
</head>

<body>
    <div class="dc_banner typeArea">
        <div class="banner_box">
            <div class="img-box">
                <img src="../../images/images-dc/dc_list/1511318778.jpg" alt="">
                <img src="../../images/images-dc/dc_list/1526586864.jpg" alt="">
                <img src="../../images/images-dc/dc_list/1880909805.jpg" alt="">
                <img src="../../images/images-dc/dc_list/340546019.jpg" alt="">
                <img src="../../images/images-dc/dc_list/884252861.jpg" alt="">
            </div>
            <ul class="clearfix nav_box">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="title_img"><img src="../../images/images-dc/dc_list/basketlist_title.png"></div>
    <div class="tab_nav typeArea ">
        <ul class="clearfix">
            <li><i class="basketlist-allnew "></i><span class="title">人气荟</span>
                <div class="line activeLine"><i class="triangle"></i></div>
            </li>
            <li><i class="basketlist-number1 jingling"></i><span class="title">心动之降</span>
                <div class="line"><i class="triangle"></i>
            </li>
            <li><i class="basketlist-number2 jingling"></i><span class="title">超值满减</span>
                <div class="line"><i class="triangle"></i>
            </li>
            <li><i class="basketlist-number3 jingling"></i><span class="title">惊喜折扣</span>
                <div class="line"><i class="triangle"></i>
            </li>
        </ul>
    </div>
    <script src="../../js/js-dc/jquery-1.12.1.js"></script>
    <script>
        $(function () {
            var index = 0;
            var timer;
            timerFun()

            function timerFun() {
                timer = setInterval(function () {
                    index++;
                    $("img").eq(index).fadeIn().siblings().fadeOut();
                    $(".nav_box li").eq(index).addClass('active').siblings().removeClass('active');
                    if (index == 4) {
                        index = -1;
                    }

                }, 2000)
            };
            $(".banner_box").hover(function () {
                clearInterval(timer);
            }, function () {
                timerFun();
            })
            $(".nav_box li").hover(function () {
                clearInterval(timer);
                index = $(this).index()
                $("img").eq(index).fadeIn().siblings().fadeOut();
                $("li").eq(index).addClass('active').siblings().removeClass('active');

            }, function () {
                timerFun()
            });
            // 下面是控制tab切换的

            $(".tab_nav li").click(function () {
                $(this).find(".title").css({
                    color: "red"
                }).parent().siblings().find(".title").css({
                    color: "#37060a"
                });

                $(this).children("div").addClass("activeLine");
                $(this).siblings().children("div").removeClass("activeLine");
                $(this).find(".jingling").css({
                    backgroundPositionY: "0px"
                }).parent().siblings().find(".jingling").css({
                    backgroundPositionY: "-47px"
                })
            })

        })
    </script>
</body>

</html>